<template>
  <div builder_unit="app">
    <el-form ref="form" :model="form" label-width="90px" :rules="addForm">
      <h1>工程变更指令确认单</h1>
      <el-form-item label="工程名称" class="head" prop="project_name">
        <el-input v-model="form.project_name"></el-input>
      </el-form-item>
      <el-form-item label="合同编号" class="head" prop="project_number">
        <el-input v-model="form.project_number"></el-input>
      </el-form-item>
      <el-form-item label="建设单位" class="head" prop="contractor_unit">
        <el-input v-model="form.contractor_unit"></el-input>
      </el-form-item>
      <el-form-item label="施工单位" class="head" prop="builder_unit">
        <el-input v-model="form.builder_unit"></el-input>
      </el-form-item>
      <el-form-item label="申请部门" prop="apply_unit">
        <el-input  v-model="form.apply_unit" style="width:300px"></el-input>
      </el-form-item>
      <el-form-item label="签证日期" prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 300px;"></el-date-picker> 
      </el-form-item>
      <el-form-item label="完成日期" prop="date2">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date2" style="width: 300px;"></el-date-picker> 
      </el-form-item>
      <el-form-item label="完成变更内容说明" prop="finish_instruction">
        <el-input type="textarea" v-model="form.finish_instruction" style="width:680px"></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="responsible">
        <el-input v-model="form.responsible" style="width:300px"></el-input>
      </el-form-item> 
      <el-form-item>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-error = "uploadsuccess"
          :file-list="fileList"
          list-type="picture">
          <el-button size="small" type="primary">上传单位盖章</el-button>
          &nbsp;&nbsp;&nbsp;<span slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</span>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button @click.native="submit" style="width: 100px;" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
      return {
        fileList:[],
        form: {
          project_name: '',
          project_number: '',
          contractor_unit: '',
          builder_unit: '',
          apply_unit: '',
          date1: '',
          date2: '',
          finish_instruction: '',
          responsible: '',
          status:0
        },
        addForm: {
          project_name: [{ required: true, message: '工程名称不能为空!', trigger: 'blur' },],
          project_number: [{ required: true, message: '合同编号不能为空!', trigger: 'blur' },],
          contractor_unit: [{ required: true, message: '建设单位不能为空!', trigger: 'blur' },],
          builder_unit: [{ required: true, message: '施工单位不能为空!', trigger: 'blur' },],
          apply_unit: [{ required: true, message: '申请部门不能为空!', trigger: 'blur' },],
          date1: [{ required: true, message: '签证日期不能为空!', trigger: 'blur' },],
          date2: [{ required: true, message: '完成日期日期不能为空!', trigger: 'blur' },],
          finish_instruction: [{ required: true, message: '完成变更内容说明不能为空!', trigger: 'blur' },],
          responsible: [{ required: true, message: '施工方负责人不能为空!', trigger: 'blur' },],
        },
      }
    },
    methods: {
      submit(){
        //   这样做的缺陷是一次只能新建一个文件
        sessionStorage.setItem("instruction", JSON.stringify(this.form));
        this.$message({
          message: '提交成功',
          type: 'success',
          center: true
        });
      },
      // 虚伪的成功调用
      uploadsuccess(){
        console.log("success");
        this.$message({
          message: '上传成功',
          type: 'success',
          center: true
        });
      },
    }
}
</script>

<style  lang="less" scoped>
#app{
  height: auto;
}
.el-form {
  width: 800px;
  height: auto;
  margin: 0 auto;
  border: 1px dashed rgba(0, 50, 100, 0.8);
  position: relative;
  h1{
    text-align: center;
  }
  .head{
    .el-input {
      width: 300px;
    }
    display: inline-block;
  }
}
.el-upload--text{
  width: 419px;
  height: 36px;
}
</style>